import { Table, message, Popconfirm, Space, Modal, Row, Col, List as AntdList, Card, Segmented } from "antd";
import { useModel, useOutletContext } from "umi";
import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconClose } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect } from "react";

import useServicer from "../../hooks/useServicer";

const ServicersCustomersPage = () => {
    const { UTCTimeToLocal } = useModel("global");
    const { selectedServicer, cardBodyHeight } = useOutletContext();
    const { dataLoading, loadServicerCustomers, customers } = useServicer();

    useEffect(() => {
        selectedServicer?.oiUuid && loadServicerCustomers(selectedServicer.oiUuid);
    }, [selectedServicer]);

    return (
        <Table loading={dataLoading} dataSource={customers} rowKey="oiUuid" bordered size="small" pagination={false} scroll={{ y: cardBodyHeight - 40 }}>
            <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
            <Table.Column title="客户名称" dataIndex="oiName" align="left" />
            <Table.Column title="社会信用代码" dataIndex="oiUscc" align="center" width={200} />
            <Table.Column title="所在地区" dataIndex="oiPrin" align="left" render={(_, r, i) => _ + r.oiCity + r.oiDist + (r.oiStre || "")} />
            <Table.Column title="详细地址" dataIndex="oiAddr" align="left" />
            <Table.Column title="加入时间" dataIndex="oiJoti" align="center" width={150} render={(_, r) => UTCTimeToLocal(_)} />
        </Table>
    );
};

export default ServicersCustomersPage;
